<template>
  <div class="common-layout">
    <!-- 树形 -->
    <el-container>
      <el-aside width="200px">
        <el-tree style="max-width: 600px" :data="treeData" @node-click="handleNodeClick" default-expand-all />
      </el-aside>
      <el-main v-if="form.departmentNext != ''">
        <div style="font-size: 35px;">部门信息</div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="部门上级">
            <el-input v-model="form.departmentNext"  disabled/>
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="form.departmentName" />
          </el-form-item>
          <el-form-item label="部门停用">
            <el-radio-group v-model="form.departmentIsNot">
              <el-radio :value=1>启用</el-radio>
              <el-radio :value=2>停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门类型">
            <el-select v-model="form.departmentTypeId" placeholder="请选择" style="width: 150px;">
              <el-option label="业务销售" value="1" />
              <el-option label="行政管理" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门序号">
            <el-input v-model="form.departmentNum" />
          </el-form-item>
          <el-form-item label="部门区域">
            <el-input v-model="form.departmentAdd" />
          </el-form-item>
          <div style="font-size: 35px;">任职信息</div>
          <el-form-item label="直接上级">
            <el-input v-model="form.superior" />
          </el-form-item>
          <el-form-item label="部门主管">
            <el-input v-model="form.departmentHead" />
          </el-form-item>
          <el-form-item label="分管负责人">
            <el-input v-model="form.inchargeHead" />
          </el-form-item>
          <el-form-item label="财务主管">
            <el-input v-model="form.financeHead" />
          </el-form-item>
          <el-form-item label="可查看人员">
            <el-input v-model="form.myProperty" />
          </el-form-item>
          <div style="font-size: 35px;">组织信息</div>
          <el-form-item label="职能体系">
            <el-input v-model="form.functional" />
          </el-form-item>
          <el-button type="danger" @click="departmentAdd">保存</el-button>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import axios from "axios";
const router = useRouter()
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
const NextName = ref([])
const handleNodeClick = (val: any) => {
  console.log(111, val)
  NextName.value = val.label
  console.log(NextName.value)
  form.departmentNext = NextName.value
}
const form = reactive({
  departmentNext: "",
  departmentName: '',
  departmentIsNot: '',
  departmentTypeId: '',
  departmentNum: '',
  departmentAdd: '',
  superior: '',
  departmentHead: '',
  inchargeHead: '',
  financeHead: '',
  myProperty: '',
  functional: ''
})

const departmentAdd = () => {
  axios.post('http://localhost:5012/api/Sheep/DePartmentAdd', {
    departmentNext: form.departmentNext,
    departmentName: form.departmentName,
    departmentIsNot: form.departmentIsNot,
    departmentTypeId: form.departmentTypeId,
    departmentNum: form.departmentNum,
    departmentAdd: form.departmentAdd,
    functional: form.functional
  }).then(res => {
    console.log(res);
    if (res.data.code == 0) {
      ElMessage.success('部门信息添加成功!');
      router.push('/DepartmentList')
      return;
    }
    else {
      ElMessage.error('部门信息添加失败!');
      return;
    }
  }).catch(err => {
    console.log(err);
  })
}
// 部门树形显示信息
interface Tree {
  label: string
  children?: Tree[]
}
const treeData = ref([])
// 树形方法显示
const getTreeData = () => {
  axios.post('http://localhost:5012/api/Sheep/EnterPriseTree', {}).then(res => {
    console.log(res.data);
    treeData.value = res.data.data
  })
}


onMounted(() => {
  getTreeData();
})
</script>